<template>
  <div class="app-container" v-loading="imporLoading">
    <div class="main">
      <div class="main_left">
        <el-row
          :gutter="10"
          class="mb8"
          style="marginbottom: 20px; marginleft: 2px"
        >
        </el-row>
        <!-- 树形结构 -->
        <el-tree
          :data="treeData"
          node-key="id"
          :expand-on-click-node="false"
          @node-click="handleCheckChange"
          :props="defaultProps"
        >
        </el-tree>
      </div>
      <div class="main_right">
        <div class="top">
          <el-input
            style="width: 200px"
            v-model="searchValueForm.productName"
            placeholder="请输入商品名称"
          ></el-input>
          <el-button
            type="primary"
            style="marginleft: 20px"
            plain
            size="small"
            @click="searChProduct"
            >搜索</el-button
          >
        </div>
        <div style="mainBox">
          <el-row :gutter="20">
            <!--用户数据-->
            <el-col>
              <el-row :gutter="10" class="mb8" style="marginbottom: 20px">
                <el-col :span="1.5">
                  <el-button
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    size="mini"
                    @click="addProduct"
                    >新增</el-button
                  >
                </el-col>
                <el-col :span="1.5">
                  <el-upload
                    class="upload-demo"
                    action="string"
                    :http-request="uploadFile"
                    :limit="1"
                    :show-file-list="false"
                  >
                    <el-button
                      type="primary"
                      size="mini"
                      plain
                      icon="el-icon-download"
                      >导入</el-button
                    >
                  </el-upload>
                </el-col>
                <el-col :span="1.5">
                  <el-button
                    type="warning"
                    plain
                    icon="el-icon-top"
                    size="mini"
                    :loading="exportLoading"
                    @click="handleExport"
                    >导出</el-button
                  >
                </el-col>
                <el-col :span="1.5">
                  <el-button
                    icon="el-icon-top"
                    size="mini"
                    type="primary"
                    plain
                    @click="exporModule"
                  >
                    导出模板
                  </el-button>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-table
            border
            v-loading="Loading"
            :data="productLists"
            style="width: 100%; margin-bottom: 20px"
            :row-style="getStyle"
            row-key="id"
          >
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-table
                  :data="props.row.secondList"
                  :show-header="false"
                  :row-style="getStyle"
                  row-key="id"
                >
                  <el-table-column
                    prop="catalogName"
                    label="分类名称"
                    align="right"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="productName"
                    label="辅材产品名称"
                    align="right"
                  >
                  </el-table-column>
                  <el-table-column prop="brand" label="辅材品牌" align="right">
                  </el-table-column>
                  <el-table-column prop="size" label="辅材尺寸" align="right">
                  </el-table-column>
                  <el-table-column prop="price" label="辅材价格" align="right">
                  </el-table-column>
                  <el-table-column prop="model" label="辅材型号" align="right">
                  </el-table-column>
                  <el-table-column
                    prop="param"
                    width="300"
                    label="辅材参数"
                    align="center"
                  >
                    <template slot-scope="props">
                      <div class="overCell" :title="props.row.param">
                        {{ props.row.param }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="description"
                    width="300"
                    label="辅材描述"
                    align="center"
                  >
                    <template slot-scope="props">
                      <div class="overCell" :title="props.row.description">
                        {{ props.row.description }}
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column prop="catalogName" align="center" label="分类名称">
            </el-table-column>
            <el-table-column prop="productName" label="产品名称" align="center">
            </el-table-column>
            <el-table-column prop="brand" align="center" label="品牌">
            </el-table-column>
           
            <el-table-column prop="unit" label="单位" align="center">
            </el-table-column>
            <el-table-column prop="taxes" label="税金" align="center">
            </el-table-column>
            <el-table-column label="照片" align="center">
              <template width="90" slot-scope="scope">
                <img
                  v-if="scope.row.imgUrl"
                  style="width: 80px; height: 80px; border: none"
                  :src="scope.row.imgUrl"
                />
              </template>
            </el-table-column>
            <el-table-column prop="price" align="center" label="价格">
            </el-table-column>
            <el-table-column prop="model" align="center" label="型号">
            </el-table-column>
            <el-table-column
              prop="param"
              width="250"
              align="center"
              label="参数"
            >
              <template slot-scope="props">
                <div class="overCell" :title="props.row.param">
                  {{ props.row.param }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              width="200"
              align="center"
              label="操作"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-button
                  type="warning"
                  size="mini"
                  plain
                  style="margin: 0px 10px"
                  @click="editBtn(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  type="danger"
                  plain
                  size="mini"
                  style="margin: 0px 10px"
                  @click="deleteBtn(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 编辑新增弹窗 -->
          <el-dialog :title="title" :visible.sync="prouductDia" width="70%">
            <div style="display: flex">
              <div style="width: 60%">
                <el-form
                  style="width: 100%"
                  :model="ruleForm"
                  :rules="rules"
                  inline
                  ref="ruleForm"
                  label-width="100px"
                  class="demo-ruleForm"
                >
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="分类名称" prop="catalogId">

                        <el-cascader
                         v-model="ruleForm.catalogId"
                          :options="treeData"
                          :show-all-levels="false"
                        
                          :props="{
                            checkStrictly: true,
                            label: 'catalogName',
                            children: 'childrens',
                            value: 'id',
                          }"
                          @change="treeSelectFirst"
                        >
                        </el-cascader>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="产品名称" prop="productName">
                        <el-input v-model="ruleForm.productName"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="品牌" prop="brand">
                        <el-input v-model="ruleForm.brand"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="型号" prop="model">
                        <el-input v-model="ruleForm.model"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                      <el-col :span="12">
                      <el-form-item label="服务范围" prop="service">
                        <el-input
                          v-model="ruleForm.service"
                          type="textarea"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="价格" prop="price">
                        <el-input
                          v-model="ruleForm.price"
                       
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                       <el-form-item label="报价基数" prop="priceScale">
                        <el-input
                          v-model="ruleForm.priceScale"
                        
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                       <el-col>
                         <el-form-item label="税金" prop="taxes">
                        <el-input
                          v-model="ruleForm.taxes"
                        
                        ></el-input>
                      </el-form-item>
                       </el-col>
                       <el-col>
                       <el-form-item label="单位" prop="unit">
                        <el-input
                          v-model="ruleForm.unit"
                        
                        ></el-input>
                      </el-form-item>
                       </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="上传照片" prop="imgUrl">
                        <el-upload
                          action="#"
                          :http-request="httpRequest"
                          list-type="picture-card"
                          accept="image/png,image/gif,image/jpg,image/jpeg"
                          :on-remove="handleRemove"
                          :file-list="fileList"
                          :limit="1"
                          :on-exceed="allowImgsNum"
                        >
                          <i class="el-icon-plus"></i>
                        </el-upload>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="辅材类别">
                        <el-cascader
                          :options="treeData"
                          :show-all-levels="false"
                          :props="{
                            checkStrictly: true,
                            label: 'catalogName',
                            children: 'childrens',
                            value: 'id',
                          }"
                          @change="treeSelectChange"
                        >
                        </el-cascader>
                      </el-form-item>
                      <el-form-item label="辅材集合" prop="productConcat">
                        <el-autocomplete
                          class="inline-input"
                          v-model="everyValue"
                          :fetch-suggestions="querySearch"
                          placeholder="请输入内容"
                          @select="AuxiliaryChange"
                        ></el-autocomplete>
                      </el-form-item>
                    </el-col>
                    
                  </el-row>
                  <el-row>
                    <el-col>
                        <el-col >
                      <el-form-item label="产品参数" prop="param">
                        <el-input
                          :rows="12"
                          v-model="ruleForm.param"
                          style="width:600px"
                          type="textarea"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
              <div style="width: 40%">
                <!-- 已经添加的辅材 -->
                <div class="seleBox">
                  <h4 style="textalign: center">已添加的辅材</h4>
                  <div
                    class="item"
                    v-for="item in AuxiliarySeletcted"
                    :key="item.id"
                  >
                    <div style="flex: 1">{{ item.productName }}</div>
                    <div style="flex: 1; textalign: ceter">
                      <div style="display: flex">
                        <i
                          style="
                            fontsize: 20px;
                            color: skyblue;
                            fontweight: bold;
                          "
                          class="iconfont icon-07wangluoanquan_jianshao"
                          @click="jian(item.secondId)"
                        ></i>
                        <input
                          onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
                          type="number"
                          style="
                            width: 50px;
                            display: inlineBlock;
                            textalign: center;
                            margin: 0px 20px;
                          "
                          v-model="item.count"
                        />
                        <i
                          style="
                            fontsize: 20px;
                            color: skyblue;
                            fontweight: bold;
                            marginright: 20px;
                          "
                          class="iconfont icon-jia"
                          @click="jia(item.secondId)"
                        ></i>
                      </div>
                    </div>
                    <div style="flex: 1; textalign: ceter">
                      <el-button
                        type="danger"
                        size="mini"
                        plain
                        @click="AuxiliaryDeleted(item)"
                        >删除</el-button
                      >
                    </div>

                  </div>
                </div>
              </div>
            </div>

            <span slot="footer" class="dialog-footer">
              <el-button @click="prouductDia = false">取 消</el-button>
              <el-button type="primary" @keyup.enter="deternime" @click="deternime">确 定</el-button>
            </span>
          </el-dialog>
          <!-- 分页器 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[1, 2, 3, 4, 5, 10, 15, 20]"
            :page-size="productpage.pageSize"
            layout="sizes, prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  exportProduct,
  importData,
  importTemplate,
  delProduct,
  editProduct,
  productList,
  newProduct,
  getImgUrl,
  productListFC
} from "@/api/request/product";
import { catalogList } from "@/api/request/classify";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { translateDataToTree } from "@/utils/removal";
export default {
  name: "User",
  components: { Treeselect },
  data() {
    return {
      fcId: "",
      searchValueForm: {
        catalogId: 1,
        productName: "",
      },
      imporLoading: false,
      defaultProps: {
        children: "childrens",
        label: "catalogName",
      },
      checkList: [],
      title: "新增产品",
      value: "",
      everyValue: "",
      total: 0,
      uploadfile: "",
      fileList: [],
      options: [], //产品分类目录
      showSearch: false,
      prouductDia: false, //弹窗
      productLists: [], //产品列表
      productpage: {
        //产品列表分页
        catalogId: 1,
        productName: "",
        pageNum: 1,
        pageSize: 5,
      },
      treeData: [], //树型结构数据
      everyList: [], //所有产品列表
      everyListFC:[],//所有辅材类别
      AuxiliarySeletcted: [], //已选择辅材
      ruleForm: {
        //新增修改产品对象
        id: "",
        mainId: "", //主材id
        catalogId: "",
        productName: "",
        brand: "",
        model: "",
        param: "",
        price: "",
        // size: "",
        unit: "",
        texPrice: "",
        taxes: 0.13,
        priceScale:"",
        // description: "",
        service: "",
        imgUrl: "",
        productConcat: [],
      },
      dialogImageUrl: "",
      dialogVisible: false,
      // 处理为一级商品结构
      rules: {
        catalogId: [
          { required: true, message: "强选择商品类别", trigger: "blur" },
        ],
        productName: [
          { required: true, message: "请填写商品名称", trigger: "blur" },
        ],
        model: [{ required: true, message: "请填写商品型号", trigger: "blur" }],
        brand: [{ required: true, message: "请填写商品品牌", trigger: "blur" }],
        param: [{ required: true, message: "请填写商品参数", trigger: "blur" }],
        size: [{ required: true, message: "请填写商品尺寸", trigger: "blur" }],
        price: [{ required: true, message: "请填写商品价格", trigger: "blur" }],
        unit: [{ required: true, message: "请填写商品单位", trigger: "blur" }],
        texPrice: [
          { required: true, message: "请填写商品不含税单价", trigger: "blur" },
        ],
        // service: [
        //   { required: true, message: "请填写商品服务范围", trigger: "blur" },
        // ],
      },
      // 遮罩层
      Loading: false,
      exportLoading: false,
      // 查询参数
    };
  },
  created() {},
  mounted() {
    this.getList();
    this.getProductList();
  },
  methods: {
    searChProduct() {
      productList({
        catalogId: 1,
        pageNum: this.productpage.pageNum,
        pageSize: this.productpage.pageSize,
        productName: this.searchValueForm.productName,
      }).then(
        (res) => {
          this.productLists = res.rows;
          this.total = res.total;
        
        },
        (err) => {
         
        }
      );
    },
    treeSelectFirst(row) {
     
      this.ruleForm.catalogId = row[row.length - 1];
     
    },
    // 选择辅材分类
    treeSelectChange(row) {
    
      this.fcId = row[row.length - 1];
      productListFC({ catalogId: this.fcId }).then(
        (res) => {
          this.everyList = [];
          // this.everyList = res.rows;
          this.everyListFC=res.rows
        },
        (err) => {
         
        }
      );
    },
    jia(row) {
     
   
      this.AuxiliarySeletcted.forEach((item) => {
        if (item.secondId == row) {
         
          item.count = Number(item.count);
          item.count += 1;
          this.$forceUpdate();
        }
      });
    },
    jian(row) {
      this.AuxiliarySeletcted.forEach((item) => {
        if (item.secondId == row && item.count > 0) {
          item.count = Number(item.count);
          item.count -= 1;
          this.$forceUpdate();
        }
      });
    },
    getStyle() {
      let obj = { height: "70px", overflow: "hiddren" };
      return obj;
    },
    handleCheckChange(data, checked, indeterminate) {
      this.productpage.catalogId = data.id;
      this.getProductList();
    },
    querySearch(queryString, cb) {
      var restaurants = this.everyListFC;
      restaurants.forEach((item) => {
        item.value = item.productName;
      });
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据

      cb(results);
    },
    handlerPageNo() {
      this.ruleForm.texPrice =
        this.ruleForm.price - this.ruleForm.price * this.ruleForm.taxes;
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !=
          -1
        );
      };
    },
    // 删除已经添加的辅材
    AuxiliaryDeleted(row) {
     
      this.AuxiliarySeletcted.forEach((item, index) => {
        if (item.secondId == row.secondId) {
          this.AuxiliarySeletcted.splice(index, 1);
        }
      });
    },
    checkedChange() {},
    AuxiliaryChange(val) {
      //遍历所有产品id 是否与选中的id相同

      if (this.AuxiliarySeletcted.length > 0) {
        //数组是否为空，为空不会执行every
        let boolen = this.AuxiliarySeletcted.every((_item) => {
          return _item.secondId != val.id;
        });
        if (boolen) {
          let obj = {
            mainId: "",
            secondId: "",
            count: "",
            productName: "",
          };
          obj.mainId = this.ruleForm.mainId;
          obj.secondId = val.id;
          obj.count = 1;

          obj.productName = val.productName;
          this.AuxiliarySeletcted.push(obj);
        } else {
          return;
        }
      } else {
        //数组为空时 直接push

        let obj = {
          mainId: "",
          secondId: "",
          count: "",
          productName: "",
        };
        obj.mainId = this.ruleForm.mainId;
        obj.secondId = val.id;
        obj.count = 1;

        obj.productName = val.productName;
        this.AuxiliarySeletcted.push(obj);
      }

      // }
      // });
    },
    handleUpdate() {},
    handleDelete() {},
    //图片上传
    handleRemove(file, fileList) {},
    httpRequest(file) {
      let fd = new FormData();
      fd.append("file", file.file);
      getImgUrl(fd).then((res) => {
        this.dialogImageUrl = res.url;
        this.ruleForm.imgUrl = res.url;
        this.dialogVisible = true;
      });
    },
    allowImgsNum(files, fileList) {
      this.$message({
        message: "只能上传一张图片哟！",
        type: "error",
      });
    },
    // 导入文件
    uploadFile(row) {
      const formData = new FormData();
      formData.append("file", row.file);
      this.imporLoading = true;
      importData(formData).then(
        (res) => {
          this.imporLoading = false;
        },
        (err) => {
          this.imporLoading = false;
        }
      );
    },
    handleChange() {},
    // 导出模板
    exporModule() {
      importTemplate().then(
        (res) => {
          this.download(res.msg);
        },
        (err) => {}
      );
    },
    handleExport() {
      exportProduct({ catalogId: 1 }).then(
        (res) => {
          this.download(res.msg);
        },
        (err) => {}
      );
    },
    getKeys() {
      return this.$uuid.v1();
    },
    handleSizeChange(val) {
      this.productpage.pageSize = val;
      this.getProductList();
    },
    handleCurrentChange(val) {
      this.productpage.pageNum = val;
      this.getProductList();
    },
    /** 查询商品分类列表 */
    getList() {
      catalogList().then(
        (res) => {
          this.options = res.rows;
          this.treeData = translateDataToTree(res.rows);
        },
        (err) => {
         
        }
      );
    },
    //获取商品列表
    getProductList() {
      this.Loading = true;
      productList(this.productpage).then(
        (res) => {
          this.Loading = false;

          this.productLists = res.rows;
          this.total = res.total;
        },
        (err) => {}
      );
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    seletecChange(val) {
      //下拉框发生改变时候

      this.productpage.catalogId = val;
      this.getProductList();
    },
    // 删除商品
    deleteBtn(row) {
      this.$confirm("是否确认删除该商品?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delProduct(row.id).then(
            (res) => {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.getProductList();
            },
            (err) => {
              this.$message({
                message: "删除失败",
                type: "error",
              });
            }
          );
        })
        .catch(() => {});
    },
    addProduct() {
      this.title = "新增产品";
      this.ruleForm.catalogId = "";
      this.ruleForm.productName = "";
      this.ruleForm.brand = "";
      this.ruleForm.catalogId = "";
      this.ruleForm.model = "";
      this.ruleForm.param = "";
      this.ruleForm.price = "";
      this.ruleForm.priceScale = "";
      this.ruleForm.unit=""
      // this.ruleForm.size = "";
      this.ruleForm.service = "";
      // this.ruleForm.description = "";
      // this.ruleForm.taxes = 0.13;
      // this.ruleForm.texPrice = "";
      this.productConcat = [];
      this.AuxiliarySeletcted = [];
      this.prouductDia = true;
      // 新增弹窗获取辅材料所有商品集合
    },
    editBtn(row) {
    
      this.everyValue = "";
      this.AuxiliarySeletcted = [];
      row.secondList.forEach((item) => {
        let obj = {
          mainId: "",
          secondId: "",
          count: "",
          productName: "",
        };
        obj.mainId = row.id;
        obj.secondId = item.secondId;
        obj.count = item.count;

        obj.productName = item.productName;
        this.AuxiliarySeletcted.push(obj);
      });
    
      //  编辑弹窗获取辅材料所有商品集合
      // productList({ catalogId: 1 }).then(
      //   (res) => {
      //     this.everyList = res.rows;
      //   },
      //   (err) => {}
      // );
      this.title = "修改产品";
      this.ruleForm.mainId = row.id;
      this.prouductDia = true;

      this.ruleForm.id = row.id;
      this.ruleForm.catalogId = row.catalogId;
      this.ruleForm.productName = row.productName;
      this.ruleForm.brand = row.brand;
      this.ruleForm.catalogId = row.catalogId;
      this.ruleForm.model = row.model;
      this.ruleForm.param = row.param;
      this.ruleForm.price = row.price;
      // this.ruleForm.size = row.size;
      this.ruleForm.priceScale =row.priceScale
      this.ruleForm.unit = row.unit;
      this.ruleForm.texPrice = row.texPrice;
      // this.ruleForm.taxes = row.taxes;
      this.ruleForm.imgUrl = row.imgUrl;
      this.fileList = [];
      let obj = {
        url: row.imgUrl,
      };
      if (row.imgUrl) {
        this.fileList.push(obj);
      }
      this.ruleForm.service = row.service;
      this.ruleForm.description = row.description;
    },
    deternime() {
      if (this.title === "新增产品") {
        this.ruleForm.productConcat = [];
        this.AuxiliarySeletcted.forEach((item) => {
          this.ruleForm.productConcat.push(item);
        });

        this.$refs.ruleForm.validate((val) => {
          if (val) {
            newProduct(this.ruleForm).then(
              (res) => {
                this.$message({
                  message: "恭喜,新增商品成功",
                  type: "success",
                });
                this.prouductDia = false;
                this.ruleForm.productConcat = [];
                this.getProductList();
              },
              (err) => {
                this.ruleForm.productConcat = [];

                this.$message({
                  message: "很遗憾,新增商品失败",
                  type: "error",
                });
              }
            );
          } else {
            return false;
          }
        });
      } else {
        //编辑商品
        this.ruleForm.productConcat = [];
        this.AuxiliarySeletcted.forEach((item) => {
          this.ruleForm.productConcat.push(item);
        });

       
        editProduct(this.ruleForm).then(
          (res) => {
            this.$message({
              message: "恭喜你，修改成功",
              type: "success",
            });
            this.prouductDia = false;
            this.AuxiliarySeletcted = [];
            // this.getProductList();
            this.fileList = [];
           
          },
          (err) => {
            this.$message({
              message: "很遗憾,修改失败",
              type: "type",
            });
          }
        );
      }
    },
  },
};
</script>
<style  scoped>
.selectFucai {
  height: 40px;
  width: 80%;
  margin-left: 10%;
  line-height: 40px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid grey;
}
.item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 5px;
  border-bottom: 1px solid grey;
}

.overCell {
  width: 250px;
  height: 70px !important;
  padding: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: wrap;
}
.main {
  display: flex;
}
.main_left {
  width: 15%;
  margin-right: 10px;
  border: 1px solid #ccc;
  box-shadow: 5px 5px #999;
}
.main_right {
  width: 85%;
}
.seleBox {
  border: 1px solid grey;
  padding: 10px;
   height:400px;
     padding:0px 10px;
      border:1px solid  #D5D5D5;
     overflow-y: auto;
}
.mainBox {
}
.top {
  height: 50px;
  padding: 10px;
  margin-bottom: 15px;
}
</style>
